<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div class="com-user-top">
    <div class="header">
      <img src="@/assets/images/head.png" />
    </div>
    <div class="center">
      <span class="usert">{{ user.uname }}</span>
      <div class="userc">
        <span>
          {{ user.tag_total }}
          <i>帖子</i>
        </span>
        <span>
          {{ user.activity_total }}
          <i>志愿活动</i>
        </span>
      </div>
      <span>
        <i>地址：</i>
        {{ user.address }}
      </span>
    </div>
    <div class="edit">
      <el-button plain round size="small" @click="clickEdit">
        修改个人信息
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      // eslint-disable-next-line space-before-function-paren
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      isEdit: false,
      // header: '../../../../assets/images/head.png',
    }
  },
  methods: {
    clickEdit() {
      this.isEdit = !this.isEdit
      this.$emit('click-Edit', this.isEdit)
    },
  },
}
</script>

<style scoped lang="less">
.com-user-top {
  display: flex;
  padding: 0 1.5rem;
  height: 9.5rem;
  background-color: white;
  color: #555666;
  .header {
    position: relative;
    width: 6rem;
    height: 100%;
    img {
      position: absolute;
      top: -0.75rem;
      height: 6rem;
      width: 6rem;
      border-radius: 50%;
      border: 0.3rem solid white;
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    margin: 1.5rem 1.5rem 0 1.5rem;
    width: 80%;
    .usert {
      color: #222226;
      font-size: 22px;
    }
    .userc {
      margin-top: 0.625rem;
      margin-bottom: 1.5rem;
      font-size: 20px;
      font-weight: 600;
      span {
        margin-right: 1.2rem;
        position: relative;
        &::after {
          position: absolute;
          right: -0.6rem;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          display: inline-block;
          height: 100%;
          width: 1px;
          background-color: #d7dae2;
        }
        &:last-child::after {
          display: none;
        }
      }
      i {
        font-size: 14px;
        color: #555666;
      }
    }
  }
  .edit {
    display: flex;
    .el-button {
      margin: auto;
    }
  }
}
</style>
